{% include "header.html" %}
<script type="text/javascript">
window.onload = function() {
    timer();
    document.form.date_time.value = new Date();
    document.form.webgl_id_refs.value = getModelz();
    document.form.s[0].disabled = true;
    //document.form.correct.value =    the correct model goes here
}

var milli = 0;
var seconds = 0;
var value = 0;
function timer(){
    if(milli>=9){
        milli=0;
        seconds+=1;
    }else
        milli+=1;
        value = seconds+"."+milli;
        setTimeout("timer()",100);
}
timer();

function returnValue(){
    return value;
}

//modify for additional models, possibly apply a for loop
function getModelz(){
    var mod_orig =document.form.orig.value;
    var mod_0 = document.form.mod_0.value;
    var mod_1 = document.form.mod_1.value;
    var mod_2 = document.form.mod_2.value;
    
    // format of original model in front then the spaces following it. easily parsable with comma sperated values
    return mod_orig + "," + mod_0 + "," + mod_1 + "," + mod_2;
}

function valr(clickedRadio){
    for(var i = 0;i<3;i++){
        if(i != clickedRadio)
        {
            document.form.s[i].disabled = true;
        }
    }
    document.form.milli.value = returnValue(); //if error occurs in passing time look here
}
{{ original }}{{ mod0 }}{{ mod1 }}{{ mod2 }}
</script>
<form name="form" action="/safc/begin/" method="POST">
    {{ form.non_field_errors }}
    {% if form.subjects.errors %}
        <ol>
            {% for error in form.subject.errors %}
                <li><b>{{ error|escape }}</b></li>
            {% endfor %}
        </ol>
    {% endif %}
    <div style="width:550px; border:solid 1px #000; padding:10px;">
        <p>You may only select one model, one time. If you need help please visit <a style="color:#3399ff;" href="/safc/tutorial/">this tutorial</a>.</p>
    </div><br />
    <div class="mh">
        <div class="cr">
            <div class="chh"><!-- Selection 1 -->
                <input type="radio" onchange="valr('0')" name="s" id="c1" value="{{ mod0.id }}" disabled="false"/>1
                <input type="hidden" name="mod_0" value="{{ mod0.id }}" />
            </div>
                <div class="canvas">
                    <img src="{{ mod0.file_location }}" width="256px" height="256px"/>
                </div>
        </div>
            
        <div class="ch">
            <div class="chh"><!-- Original -->
                Original<input type="hidden" name="orig" value="{{ original.id }}" />
            </div>
                <div class="canvas">
                    <img src="{{ original.file_location }}" width="256px" height="256px"/>
                </div>
        </div>
        <br />
        
        <div class="cr">
            <div class="chh"><!-- Selection 3 -->
                <input onchange="valr('1')" type="radio" name="s" value="{{ mod1.id }}" id="c2" disabled="false"/>3
                <input type="hidden" name="mod_1" value="{{ mod1.id }}" />
            </div>
                <div class="canvas">
                    <img src="{{ mod1.file_location }}" width="256px" height="256px"/>
                </div>
        </div>
    
        <div class="ch">
            <div class="chh"><!-- Selection 2 -->
                <input onchange="valr('2')" type="radio" name="s" value="{{ mod2.id }}" id="c3" />2
                <input type="hidden" name="mod_2" value="{{ mod2.id }}" />
            </div>
                <div class="canvas">
                    <img src="{{ mod2.file_location }}" width="256px" height="256px"/>
                </div>
        </div>
    </div><br />
    <div class="s">
        Why did you chose that patient?<br />
        {{ form.textbox }}{{ form.checkboxes }}<br />
        <input type="hidden" name="milli" />
        <input type="hidden" name="date_time" />
        <input type="hidden" name="webgl_id_refs" />
        <input type="hidden" name="correct" value="{{ correct }}"/>
        <input style="margin-top:5px;" type="submit" value="Submit" />
        <b style="color:red;">{{ form.textbox.errors }}{{ form.checkboxes.errors }}</b>
    </div>
</form>
{% include "footer.html" %}